import * as React from 'react';
import {observer} from 'mobx-react'
import styles from './index.scss';

import Pie from '../../home/Pie'
import DoublePie from '../../home/DoublePie'
import Water from './Right'
import FirstStore from '../../../store/firstStore'

interface IProps {
    chartType: string
    uptime_rate?: number
}


@observer
class Home extends React.Component<IProps> {

    constructor(props) {
        super(props);
    }


    public render() {
        const {chartType, uptime_rate} = this.props
        const {interruptY2All, interruptY3All,interruptY4All,interruptY5All} = FirstStore
        return (
            <div className={styles.EChart}>
                {
                    chartType === 'doublePie' ?
                        <DoublePie dataMvct={interruptY2All} dataTx={interruptY3All} />
                        :
                        chartType === 'pie' ?
                            <Pie data1={interruptY2All} data2={interruptY3All} data3={interruptY4All} data4={interruptY5All} />
                            :
                            chartType === 'water' ?
                                <Water uptime_rate={uptime_rate} />
                                :
                                null
                }
            </div>
        );
    }
}

export default Home;
